<template>
    <div>
      <div class="header">
          <ul>
              <!-- <li @click="handelClick('firstpage')">首页</li>
              <li @click="handelClick('collect')">我的收藏</li>
              <li @click="handelClick('personal')">个人信息</li> -->
              <router-link to="/home/firstpage" tag="li"><a>首页</a></router-link>
              <router-link to="/home/collect"  tag="li"><a>我的收藏</a></router-link>
              <router-link to="/home/personal" tag="li"><a>个人信息</a></router-link>
          </ul>
      </div>
      <div class="main">
            <!--  -->
         <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
             <!-- <components :is="componentId"></components> -->
         </keep-alive>
         <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
</template>

<script>
// import FirstPage from '../views/FirstPage.vue'
// import Collect from '../views/Collect.vue'
// import Personal from '../views/Personal.vue'
    export default {
        // components:{
        //    'firstpage':FirstPage,
        //    'collect':Collect,
        //    'personal':Personal
        // },
        data(){
            return{
                // componentId:'firstpage'
            }
        },
        methods:{
            // handelClick(val){
            //         this.componentId = val
            // }
        }
    }
</script>

<style scoped>
.header{
    background: lightblue;
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background:#999;
    position: fixed;
    bottom: 0;
    left: 0;
    right:0
}
.header ul{
    display: -webkit-box;
}
.header ul li{
    -webkit-box-flex: 1;
    list-style: none;
    font-size: 20px;
    
}
/* .header:hover{
    background:#666;
} */
.header ul li a{
    text-decoration: none;
    color: #fff;
}
.router-link-active{
    color: aliceblue;
    background: #aaa;
}
</style>